<template>
    <el-container class="home-page">
        <el-header class="header-menu">
            <div class="page-title">
                <a javascript=":;" @click="goHome" style="color:#fff;text-decoration: none;cursor: pointer;">TEG移动测试业务组</a>
            </div>
        </el-header>
        <el-container>
            <el-menu
                :default-active="dafaultIndex"
                style="width: 200px; text-align: left;"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#fff">
                <el-submenu :index="(index+1).toString()" :key="'menu'+index" v-for="(menu, index) in  menuData">
                    <template slot="title">
                        <span>{{menu.name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item :index="(index+1)+'-'+(subindex+1)" :key="'submenu'+subindex" v-for="(submenu, subindex) in menu.children" @click="handleSubmenu(submenu, (index+1)+'-'+(subindex+1))">{{submenu.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
            <el-main style="overflow:hidden;padding: 0; margin: 0;">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>


<script>
    export default {
        data() {
            return {
                dafaultIndex: "1",
                isCollapse: true,
                activeName: "second",
                breadcrumbItems:['各SDK接入情况'],
                selectUrl: '/dashboard',
                menuData: [
                    {
                        name: "支持产品",
                        children: [
                            {
                                name: "各SDK接入情况",
                                link: "https://baidu.com",
                                children: []
                            },
                            {
                                name: "SDK测试数据层",
                                link: "https://www.sina.com.cn/",
                                children: []
                            },
                            {
                                name: "在测项目进度",
                                link: "/product",
                                children: []
                            },
                            {
                                name: "各SDK接口文档",
                                children: []
                            },
                            {
                                name: "线上接口分析",
                                children: []
                            }
                        ]
                    },
                    {
                        name: "测试流程&模板",
                        children: [
                            {
                                name: "测试流程",
                                children: []
                            },
                            {
                                name: "各阶段目标",
                                children: []
                            },
                            {
                                name: "测试体系",
                                children: []
                            },
                            {
                                name: "兼容性列表",
                                children: []
                            },
                            {
                                name: "各SDK测试用例",
                                children: []
                            }
                        ]
                    },
                    {
                        name: "服务端平台及工具",
                        children: [
                            {
                                name: "接口自动化",
                                children: []
                            },
                            {
                                name: "直播辅助工具",
                                children: []
                            },
                            {
                                name: "服务端接口文档",
                                children: []
                            },
                            {
                                name: "性能测试",
                                children: []
                            }
                        ]
                    },
                    {
                        name: "服务端平台及工具",
                        children: [
                            {
                                name: "接口自动化",
                                children: []
                            },
                            {
                                name: "直播辅助工具",
                                children: []
                            },
                            {
                                name: "服务端接口文档",
                                children: []
                            },
                            {
                                name: "性能测试",
                                children: []
                            }
                        ]
                    },
                    {
                        name: "Web端&M端&小程序",
                        children: [
                            {
                                name: "web性能测试",
                                children: []
                            }
                        ]
                    }
                ]
            };
        },
        created() {
            this.dafaultIndex = this.$route.query.i
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log("key的值",key);
                console.log("keyPath的值", keyPath);
                switch(key){
                    case '1':
                        this.$router.push('/Page1');
                        this.breadcrumbItems  = ['各SDK接入情况'];
                        break;
                    case '2':
                        this.$router.push('/Page2');
                        this.breadcrumbItems  = ['SDK测试数据层'];
                        break;
                    case '3':
                        this.$router.push('/Page3');
                        this.breadcrumbItems  = ['在测项目进度'];
                        break;
                }

            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);

            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSubmenu(item, idx) {
                this.dafaultIndex = idx;
                this.selectUrl = item.link;
                if (!this.selectUrl) {
                    this.$message.error('输入的路径不存在， 将自动跳转首页！')
                    setTimeout(() => {
                        this.$router.push('/')
                        window.location.reload();
                    }, 2000)
                    return false;
                }
                if (!/^http/.test(this.selectUrl)) {
                    this.$router.push({
                        path: this.selectUrl,
                        query: {
                            i: idx,
                            t: +new Date()
                        }
                    })
                } else {
                    this.$router.push({
                        path: '/webview',
                        query: {
                            url: encodeURIComponent(this.selectUrl),
                            i: idx,
                            t: +new Date()
                        }
                    })
                }
            },
            goHome() {
                this.$router.push('/')
                window.location.reload();
            }
        }
    };
</script>

<style lang="less" scoped>
    .home-page {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .header-menu {
        background-color: rgb(4, 20, 41);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0;

        .page-title {
            width: 200px;
            height: 60px;
            font-size: 20px;
            color: #fff;
        }
    }

    .aside-menu {

        height: 100%;
        overflow: hidden;
    }

    /* .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      height: 100%;
    } */
    .el-header {
        color: #bfcbd9;
        line-height: 60px;
        // padding: 0;
    }

    .el-aside {
        background-color: rgb(4, 20, 41);
        color: #bfcbd9;
    }

    .el-menu {
        border: none;
    }

    .el-menu-item.is-active {
        color: #fff;
        background-color: #2b90f7 !important;

    }

    .el-menu-item:hover {
        background-color: #2b90f7 !important;
        color: #fff !important;

        i {
            color: #fff !important;
        }

    }
</style>